<script lang="ts" setup>
import { reactive, ref, watch } from "vue"
import { Search, Refresh } from "@element-plus/icons-vue"
import { usePagination } from "@/hooks/usePagination"
import { getDyqueryPageApi, dyShopupda, dyupdateType } from "@/api/capture-dy/index"
import { type FormInstance, ElMessage, type FormRules } from "element-plus"
import { useUserStore } from "@/store/modules/user"
// import useClipboard from "vue-clipboard3"
import { checkPhoneNumber, checkID, checkName } from "@/utils/validate"
import { shortcuts } from "@/utils/dateSet"
import { formatDateTime } from "@/utils"
import { useCascaderAreaData } from "@vant/area-data" // 地址
import { getwebSetApi } from "@/api/webSet/order" // 接口
defineOptions({
  name: "CaptureListDy2"
})

const { paginationData, handleCurrentChange, handleSizeChange } = usePagination()
const userStore = useUserStore()

const loading = ref<boolean>(false)
const formRef = ref<FormInstance | null>(null)
const areaoptions = useCascaderAreaData() // 地址
const props = {
  multiple: false,
  checkStrictly: true,
  label: "text",
  value: "text"
} // 地址
// #region 查
const defaultTime1: [Date, Date] = [new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 2, 1, 23, 59, 0)]
const searchFormRef = ref<FormInstance | null>(null)

// 搜索内容
const searchData = reactive<any>({
  time: "",
  orderId: "",
  idcardname: "",
  phone: "",
  Idcard: "",
  authorId: "",
  orderType: ""
})

const formRules: FormRules = reactive({
  idCardName: [{ required: true, validator: checkName, trigger: "blur" }],
  name: [{ required: true, validator: checkName, trigger: "blur" }],
  consignee: [{ required: true, validator: checkName, trigger: "blur" }],
  // handleMobile: [{ required: true, validator: checkPhoneNumber, trigger: "blur" }],
  idCard: [{ required: true, validator: checkID, trigger: "blur" }],
  phone: [{ required: true, validator: checkPhoneNumber, trigger: "blur" }],
  isMentor: [{ required: true, trigger: "blur", message: "请选择是否师傅代收" }],
  maskName: [{ required: true, trigger: "blur", message: "请填写收件人姓名" }],
  idcardname: [{ required: true, trigger: "blur", message: "请填写身份证姓名" }],
  money: [{ required: true, trigger: "blur", message: "请输入付款金额" }]
  // address: [{ required: true, trigger: "blur", message: "请输入地址" }]
})

const resetSearch = () => {
  searchFormRef.value?.resetFields()
  if (paginationData.currentPage === 1) {
    getTableData()
  }
  paginationData.currentPage = 1
}
const handleSearch = () => {
  if (paginationData.currentPage === 1) {
    getTableData()
  }
  paginationData.currentPage = 1
}
// #endregion

const tableData = ref<any>([])
const getTableData = async () => {
  if (!searchData.time) {
    searchData.time = []
  }
  loading.value = true
  await getDyqueryPageApi({
    startTime: new Date(searchData.time[0]).getTime() || "",
    endTime: new Date(searchData.time[1]).getTime() || "",
    page: paginationData.currentPage,
    size: paginationData.pageSize,
    orderId: searchData.orderId,
    idcardname: searchData.idcardname,
    phone: searchData.phone,
    Idcard: searchData.Idcard,
    orderType: searchData.orderType,
    authorId: searchData.authorId
  })
    .then((res: any) => {
      paginationData.total = res.data.total
      if (res.data.orderList) {
        tableData.value = res.data.orderList
      } else {
        tableData.value = []
      }
      loading.value = false
      tableData.value.forEach((element: any) => {
        // console.log(element, 22)
        comboList.value.forEach((item: any) => {
          if (element.skuid == item.code) {
            // 如果有匹配套餐,那么赋值,可以勾选提交
            element.TJstate = 3
          }
        })
      })
    })
    .finally(() => {
      loading.value = false
    })
}

// #region 套餐
import { getComboDataApi } from "@/api/combo-jd"
const comboList = ref<any>([])
// getComboDataApi({
//   page: 1,
//   size: 10000,
//   type: "dy",
//   userId: userStore.usernameID
// }).then((res: any) => {
//   comboList.value = res.data.list
// })
/**监听套餐缓存(pinia) */
import { useComboStore } from "@/store/modules/combo"
const comboStore = useComboStore()
comboStore.getComoboFn()
const comboList2 = ref<any>([])
watch(
  [() => comboStore.comboListStore],
  (newValue) => {
    comboList2.value = newValue.flat()
  },
  {
    immediate: true
  }
)
// #endregion

// #region 查看详情
const formData = reactive<any>({ data: {} })
const seeState = ref<string>("")
const dialogVisible = ref<boolean>(false)

//查看详情
const handleSeeInfo = async (row: any) => {
  seeState.value = "see"
  dialogVisible.value = true
  if (row.orderType == "宽带") {
    formData.data = JSON.parse(JSON.stringify(row)) // 赋值需要深拷贝
    formData.data.var2 = row.var2.split(",")
    // 根据区域拿套餐
    getwebSetApi({ area: formData.data.var2.join(",") }).then((res: any) => {
      webIdList.value = res.data.list
    })
  } else {
    formData.data = JSON.parse(JSON.stringify(row)) // 赋值需要深拷贝
  }
}
// #endregion

// #region 批量提交
const dataArr = ref<any>([])
const tableRef = ref<any>(null)

// 订单上传接口
// const good_sku = ref<any>("")
// const pushDy = async (data: any) => {
//   // const datainfo = data[0]
//   // console.log(datainfo.skuid)
//   // comboList.value.filter((item: any) => {
//   //   if (item.code === datainfo.skuid) {
//   //     good_sku.value = item.systemId ? item.systemId : item.heId
//   //   }
//   // })
//   // console.log(good_sku.value)
//   // if (!good_sku.value) {
//   //   ElMessage.warning("商品未与系统套餐做匹配，请先配置套餐!")
//   //   return
//   // }
//   console.log(dataArr.value, "提交")
//   await dyShopupda(dataArr.value).then((res: any) => {
//     // console.log(res, 1923)
//     if (res.code == 200) {
//       dataArr.value = []
//       tableRef.value?.clearSelection()
//       ElMessage.success(res.message)
//       dialogVisible.value = false
//     }
//   })
// }
//单次提交
const handleAdd = async (row: any) => {
  console.log(row, 888888)
  dialogVisible.value = true
  formData.data = JSON.parse(JSON.stringify(row)) // 赋值需要深拷贝
  if (row.photo) {
    // 如果最后一个是逗号删除
    fileList1.value = row.photo
      .replace(/,$/, "")
      ?.split(",")
      .map((item: any) => {
        return {
          url: `http://fansitexitong.cn/image/${item}`
          // url: item
          // url: `http://192.168.1.8:8080/image/${item}`
        }
      })
  }
  console.log(fileList1.value, "图片")
  // console.log(formData.data.var2, 6666)
  if (row.orderType == "宽带") {
    if (row.var2 !== null) {
      formData.data.var2 = row.var2.split(",")
      // 根据区域拿套餐
      getwebSetApi({ area: formData.data.var2.join(",") }).then((res: any) => {
        webIdList.value = res.data.list
      })
    }
  }

  getComboDataApi({
    page: 1,
    size: 10000,
    type: "dy",
    userId: userStore.usernameID,
    packageType: row.orderType
  }).then((res: any) => {
    comboList.value = res.data.list
  })
}
const handlePushOne = () => {
  formRef.value?.validate((valid: boolean) => {
    if (valid) {
      if (formData.data.orderType == "宽带") {
        if (!formData.data.var2) {
          formData.data.var2 = []
        }
        dyShopupda({
          ...formData.data,
          var2: formData.data.var2.join(",")
        }).then((res: any) => {
          if (res.code == 200) {
            tableRef.value?.clearSelection()
            ElMessage.success(res.message)
            dialogVisible.value = false
            getTableData()
          }
        })
      } else {
        dyShopupda(formData.data).then((res: any) => {
          if (res.code == 200) {
            tableRef.value?.clearSelection()
            ElMessage.success(res.message)
            dialogVisible.value = false
            getTableData()
          }
        })
        console.log("号卡")
      }
    } else {
      return false
    }
  })
}

// #endregion

//  #region 清除规则报错信息
const currentUpdateId = ref<undefined | string>(undefined)
const clearValidate = () => {
  formRef.value?.clearValidate()
}
const resetForm = () => {
  currentUpdateId.value = undefined
  seeState.value = ""
  dataArr.value = []
  webIdList.value = []
  fileList1.value = []
  formData.data = {}
  clearValidate()
}
// #endregion

//复制套餐编码
// const { toClipboard } = useClipboard()
// const copy = async (text: string) => {
//   try {
//     await toClipboard(text) //实现复制
//     ElMessage.success("已复制！")
//   } catch (e) {
//     console.error(e)
//   }
// }
/**加密 */
const toHideString = (val: any, len: any) => {
  if (val) {
    if (val.length == 2) {
      return `${val.substring(0, len)}*****${val.substring(val.length)}`
    } else {
      return `${val.substring(0, len)}*****${val.substring(val.length - len)}`
    }
  }
}

// 修改订单类型
const dialogVisibleWork = ref(false)
const orderType = reactive<any>({ data: {} })

const handorderType = (row: any) => {
  dialogVisibleWork.value = true
  console.log(row)
  orderType.data.orderid = row.orderid
  orderType.data.orderType = row.orderType
}
const handorderTypeOne = () => {
  // console.log(orderType.data, 8888)
  dyupdateType(orderType.data).then((res: any) => {
    // console.log(res, "888")
    dialogVisibleWork.value = false
    ElMessage.success(res.data)
    getTableData()
  })
}

// 根据可安装区域选择套餐
const webIdList = ref<any>([])
const ChangewebIdList = (i: any) => {
  console.log(i, 88)
  formData.data.orderPackageId = ""
  getwebSetApi({ area: i.join(",") }).then((res: any) => {
    webIdList.value = res.data.list
  })
}

// #region 多张图片 上传图片
import { getToken } from "@/utils/cache/cookies"
const fileList1 = ref<any>([]) /**图片列表 */
const headersOpts = {
  token: getToken()
}
const handleChageImg1 = (file: any, resfileList: any) => {
  const size = ref(2)
  const fileSizeFlag = file.size / 1024 / 1024 < size.value
  if (!fileSizeFlag) {
    ElMessage.error(`请上传不大于${size.value}M的图片!`)
    formData.data.photo = resfileList.filter((item: any) => item.uid !== file.uid) /**不符合规定的图片不在照片墙展示 */
  } else {
    formData.data.photo = resfileList
      .map((item: any) => {
        return item.response?.data.split("/image/")[1]
          ? item.response?.data.split("/image/")[1]
          : item.url.split("/image/")[1]
      })
      .join(",")
  }
}
// 多张图片 移除图片
import type { UploadProps } from "element-plus"
const handleRemove: UploadProps["onRemove"] = (uploadFile: any, uploadFiles: any) => {
  console.log(uploadFiles, 180, uploadFile)
  formData.data.photo = uploadFiles
    .map((item: any) => {
      return item.response?.data.split("/image/")[1]
        ? item.response?.data.split("/image/")[1]
        : item.url.split("/image/")[1]
    })
    .join(",")
}
// 放大查看图片
const dialogImageUrl = ref("")
const dialogVisible2 = ref(false)
const handlePictureCardPreview: UploadProps["onPreview"] = (uploadFile: any) => {
  dialogImageUrl.value = uploadFile.url!
  dialogVisible2.value = true
}
// #endregion

/** 监听分页参数的变化 */
watch([() => paginationData.currentPage, () => paginationData.pageSize], getTableData, { immediate: true })
// #endregion
</script>
<template>
  <div class="app-container">
    <el-card shadow="never" class="search-wrapper" v-loading="loading">
      <el-form ref="searchFormRef" :inline="true" :model="searchData">
        <el-form-item prop="orderId" label="订单ID">
          <el-input v-model.trim="searchData.orderId" clearable placeholder="请输入" style="width: 240px" />
        </el-form-item>
        <el-form-item prop="idcardname" label="身份证名字">
          <el-input v-model.trim="searchData.idcardname" clearable placeholder="请输入" style="width: 240px" />
        </el-form-item>
        <el-form-item prop="phone" label="联系电话">
          <el-input v-model.trim="searchData.phone" clearable placeholder="请输入" style="width: 240px" />
        </el-form-item>
        <el-form-item prop="Idcard" label="身份证号码">
          <el-input v-model.trim="searchData.Idcard" clearable placeholder="请输入" style="width: 240px" />
        </el-form-item>
        <el-form-item prop="authorId" label="达人id">
          <el-input v-model.trim="searchData.authorId" clearable placeholder="请输入" style="width: 240px" />
        </el-form-item>
        <el-form-item prop="orderType" label="订单类型">
          <el-select v-model="searchData.orderType" clearable placeholder="请选择" style="width: 200px">
            <el-option key="1" label="号卡" value="号卡" />
            <el-option key="2" label="宽带" value="宽带" />
          </el-select>
        </el-form-item>
        <el-form-item prop="time" label="创建时间">
          <el-date-picker
            v-model="searchData.time"
            type="datetimerange"
            range-separator="到"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            :shortcuts="shortcuts"
            :default-time="defaultTime1"
          />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" :icon="Search" @click="handleSearch">查询</el-button>
          <el-button :icon="Refresh" @click="resetSearch">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card shadow="never" v-loading="loading">
      <div class="table-wrapper">
        <el-table :data="tableData" ref="tableRef">
          <el-table-column prop="orderid" label="订单ID" align="center" />
          <el-table-column prop="authorid" label="达人ID" align="center" />

          <el-table-column label="产品名称" align="center" width="300">
            <template #default="scope">
              <el-row>
                <el-col :span="8" style="text-align: center; vertical-align: middle">
                  <!-- <p><img :src="scope.row.orders.order[0].pic_path" alt="" width="60" height="60" /></p> -->
                </el-col>
                <el-col :span="16">
                  <p :title="scope.row.productname">
                    {{ scope.row.productname }}
                  </p>
                </el-col>
              </el-row>
            </template>
          </el-table-column>
          <!-- <el-table-column label="套餐匹配" align="center" width="360">
            <template #default="scope">
              <el-select v-model="scope.row.skuid" clearable filterable placeholder="请选套餐">
                <el-option v-for="item in comboList" :key="item.id" :label="item.systemName" :value="item.code" />
              </el-select>
              <el-link type="primary" style="margin-left: 10px" @click="copy(scope.row.skuid)"
                ><el-icon><DocumentCopy /></el-icon>复制编码</el-link
              >
            </template>
          </el-table-column> -->
          <el-table-column prop="createtime" label="创建时间" width="180" align="center">
            <template #default="scope">
              <text> {{ formatDateTime(scope.row.createtime) }}</text>
            </template>
          </el-table-column>
          <el-table-column label="身份信息" align="center">
            <template #default="scope">
              <p>{{ toHideString(scope.row.idcardname, 1) }}</p>
              <p>{{ toHideString(scope.row.idcard, 4) }}</p>
              <p>
                {{ scope.row.province }} {{ scope.row.city }} {{ scope.row.town }}{{ scope.row.street }}
                {{ toHideString(scope.row.address, 1) }}
              </p>
            </template>
          </el-table-column>
          <el-table-column prop="phone" label="联系电话" align="center" />
          <el-table-column prop="status" label="状态" align="center" />
          <!-- <el-table-column prop="orderType" label="订单类型" align="center" /> -->
          <el-table-column prop="orderType" label="订单类型" align="center">
            <template #default="scope">
              <div class="container">
                <el-text class="mx-1" type="primary">
                  <el-tooltip :content="scope.row.orderType" placement="top">
                    {{ scope.row.orderType }}
                  </el-tooltip>
                </el-text>
              </div>
              <br />
              <div>
                <el-button type="primary" text bg size="small" @click="handorderType(scope.row)">修改类型</el-button>
              </div>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="180" align="center">
            <template #default="scope">
              <el-button
                v-if="scope.row.status !== '已提交'"
                type="primary"
                text
                bg
                size="small"
                @click="handleAdd(scope.row)"
                style="margin: 10px 0"
                >修改提交</el-button
              ><br />
              <el-button type="primary" text bg size="small" @click="handleSeeInfo(scope.row)">查看详情</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pager-wrapper">
        <el-pagination
          background
          :layout="paginationData.layout"
          :page-sizes="[10, 20]"
          :total="paginationData.total"
          :page-size="paginationData.pageSize"
          :currentPage="paginationData.currentPage"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
    <!-- 新增/修改 -->
    <el-dialog v-model="dialogVisible" :title="seeState === 'see' ? '查看详情' : '提交'" @close="resetForm" width="60%">
      <el-form ref="formRef" :rules="formRules" :model="formData.data" label-width="100px" label-position="left">
        <el-form-item prop="orderid" label="订单ID">
          <el-input v-model="formData.data.orderid" placeholder="请输入订单编号" disabled />
        </el-form-item>
        <el-form-item prop="authorid" label="达人ID">
          <el-input v-model="formData.data.authorid" disabled />
        </el-form-item>
        <el-form-item prop="productname" label="套餐名">
          <el-input v-model="formData.data.productname" disabled />
        </el-form-item>
        <el-form-item prop="skuid" label="产品SKU">
          <el-input v-model="formData.data.skuid" disabled />
        </el-form-item>
        <el-form-item prop="createtime" label="创建时间">
          <div class="el-input is-disabled">
            <div class="el-input__wrapper">
              <span class="el-input__inner">{{ formatDateTime(formData.data.createtime) }}</span>
            </div>
          </div>
        </el-form-item>
        <el-form-item prop="idcardname" label="身份证姓名">
          <el-input v-model.trim="formData.data.idcardname" :disabled="seeState === 'see'" />
        </el-form-item>
        <el-form-item prop="idcard" label="身份证号码">
          <el-input v-model.trim="formData.data.idcard" :disabled="seeState === 'see'" />
        </el-form-item>
        <el-form-item prop="maskName" label="收件人姓名">
          <el-input v-model.trim="formData.data.maskName" :disabled="seeState === 'see'" />
        </el-form-item>

        <el-form-item prop="remark" label="抖音备注">
          <el-input v-model="formData.data.remark" disabled />
        </el-form-item>
        <el-form-item prop="orderRemark" label="订单备注">
          <el-input v-model="formData.data.orderRemark" :disabled="seeState === 'see'" />
        </el-form-item>
        <el-form-item prop="phone" label="联系电话">
          <el-input v-model="formData.data.phone" :disabled="seeState === 'see'" />
        </el-form-item>
        <el-form-item prop="money" label="付款金额" v-if="formData.data.orderType == '宽带'">
          <el-input v-model="formData.data.money" placeholder="请输入" :disabled="seeState === 'see'" />
        </el-form-item>
        <el-form-item prop="isMentor" label="师傅代收款" v-if="formData.data.orderType == '宽带'">
          <el-select v-model="formData.data.isMentor" clearable placeholder="请选择" :disabled="seeState === 'see'">
            <el-option :key="1" label="是" value="是" />
            <el-option :key="2" label="否" value="否" />
          </el-select>
        </el-form-item>
        <el-form-item prop="awardRemark1" label="奖励备注" v-if="formData.data.orderType == '宽带'">
          <el-select v-model="formData.data.awardRemark1" clearable placeholder="请选择" :disabled="seeState === 'see'">
            <el-option :key="1" label="公司" value="公司" />
            <el-option :key="2" label="店铺" value="店铺" />
          </el-select>
          <el-select
            v-model="formData.data.awardRemark2"
            placeholder="请选择备注信息"
            clearable
            :disabled="seeState === 'see'"
          >
            <el-option label="话费补贴" value="话费补贴" />
            <el-option label="礼品价值" value="礼品价值" />
            <el-option label="现金补贴" value="现金补贴" />
          </el-select>
          <el-input
            v-model="formData.data.awardRemark3"
            placeholder="请输入"
            style="width: 280px"
            :disabled="seeState === 'see'"
          />
        </el-form-item>
        <el-form-item prop="lastNumber" label="机顶盒" v-if="formData.data.orderType == '宽带'">
          <el-select v-model="formData.data.lastNumber" clearable placeholder="请选择" :disabled="seeState === 'see'">
            <el-option :key="1" label="不要" :value="0" />
            <el-option :key="2" label="要" :value="1" />
          </el-select>
        </el-form-item>

        <!-- 多张图片上传 -->
        <el-form-item prop="photo" label="上传图片" v-if="formData.data.orderType == '宽带'">
          <el-upload
            :multiple="true"
            v-model:file-list="fileList1"
            action="api/webOrder/image/upload"
            list-type="picture-card"
            :on-remove="handleRemove"
            :headers="headersOpts"
            accept="image/*"
            :on-change="handleChageImg1"
            :on-preview="handlePictureCardPreview"
            :disabled="seeState === 'see'"
          >
            <el-icon><Plus /></el-icon>
          </el-upload>
          <el-dialog v-model="dialogVisible2">
            <img w-full :src="dialogImageUrl" alt="Preview Image" />
          </el-dialog>
        </el-form-item>
        <el-form-item prop="status" label="状态">
          <el-input v-model="formData.data.status" disabled />
        </el-form-item>
        <el-form-item prop="skuid" label="抖音套餐">
          <el-select
            v-model="formData.data.skuid"
            clearable
            filterable
            placeholder="请选套餐"
            style="width: 100%"
            :disabled="seeState === 'see'"
          >
            <el-option v-for="item in comboList" :key="item.id" :label="item.systemName" :value="item.code" />
          </el-select>
        </el-form-item>
        <!-- 号卡没有可安装区域，宽带根据可安装区域选择套餐 -->
        <el-form-item prop="var2" label="可安装区域" v-if="formData.data.orderType == '宽带'">
          <el-cascader
            :disabled="seeState === 'see'"
            size="large"
            placeholder="可输入地址快速查询"
            :props="props"
            :options="areaoptions"
            v-model="formData.data.var2"
            :filterable="true"
            @change="ChangewebIdList"
          />
        </el-form-item>
        <el-form-item prop="orderPackageId" label="团队套餐" v-if="formData.data.orderType == '宽带'">
          <el-select
            :disabled="seeState === 'see'"
            v-model="formData.data.orderPackageId"
            clearable
            filterable
            placeholder="请选择"
            style="width: 240px"
          >
            <el-option
              v-for="item in webIdList"
              :key="item.id"
              :label="item.name"
              :value="item.id + ''"
              :disabled="item.state == '下架'"
            />
          </el-select>
        </el-form-item>
        <el-form-item prop="orderPackageId" label="团队套餐" v-if="formData.data.orderType == '号卡'">
          <el-select
            v-model="formData.data.orderPackageId"
            clearable
            filterable
            placeholder="请选套餐"
            style="width: 100%"
            :disabled="seeState === 'see'"
          >
            <el-option v-for="item in comboList2" :key="item.id" :label="item.name" :value="item.id + ''" />
          </el-select>
        </el-form-item>
        <!-- <el-form-item prop="productPic" label="套餐主图">
          <div class="demo-image__preview">
            <el-image
              style="width: 100px; height: 100px"
              :src="formData.data.orders.order[0].pic_path"
              :zoom-rate="1.2"
              :initial-index="4"
              fit="cover"
            />
          </div>
        </el-form-item> -->
        <div>
          <el-form-item prop="province" label="收货省份">
            <el-input v-model="formData.data.province" placeholder="请输入" :disabled="seeState === 'see'" />
          </el-form-item>
          <el-form-item prop="city" label="收货市">
            <el-input v-model="formData.data.city" placeholder="请输入" :disabled="seeState === 'see'" />
          </el-form-item>
          <el-form-item prop="town" label="收货区">
            <el-input v-model="formData.data.town" placeholder="请输入" :disabled="seeState === 'see'" />
          </el-form-item>
          <el-form-item prop="street" label="街道">
            <el-input v-model="formData.data.street" placeholder="请输入" :disabled="seeState === 'see'" />
          </el-form-item>
          <el-form-item prop="address" label="详细地址">
            <el-input v-model="formData.data.address" placeholder="请输入" :disabled="seeState === 'see'" />
          </el-form-item>
        </div>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handlePushOne" v-if="seeState !== 'see'">确认</el-button>
      </template>
    </el-dialog>
    <!-- 修改订单类型 -->
    <el-dialog v-model="dialogVisibleWork" @close="resetForm" width="25%">
      <el-form ref="formRef" :rules="formRules" :model="orderType.data" label-width="100px" label-position="left">
        <el-form-item prop="orderType" label="订单类型">
          <el-select v-model="orderType.data.orderType" clearable placeholder="请选择" style="width: 200px">
            <el-option key="1" label="号卡" value="号卡" />
            <el-option key="2" label="宽带" value="宽带" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisibleWork = false">取消</el-button>
        <el-button type="primary" @click="handorderTypeOne">确认</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped>
.search-wrapper {
  margin-bottom: 20px;
  .btn {
    width: 100%;
    height: 100%;
    display: flex;
  }
}

.table-wrapper {
  margin-bottom: 20px;
}

.pager-wrapper {
  display: flex;
  justify-content: flex-end;
}
:deep(.el-upload-list__item .el-icon--close-tip) {
  top: 20px;
  left: 10px;
  right: 0;
}
.doing {
  color: #b88230;
}
.error {
  color: red;
}
.success {
  color: #67c23a;
}
.again {
  color: #c45656;
}
:deep(.el-popper) {
  max-width: 50% !important;
}
.date-box {
  width: 340px !important;
}
.text-ellipsis {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 3;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}
</style>
<style>
.el-popper.is-customized {
  /* Set padding to ensure the height is 32px */
  padding: 6px 12px;
  background: linear-gradient(90deg, rgb(159, 229, 151), rgb(204, 229, 129));
}

.el-popper.is-customized .el-popper__arrow::before {
  background: linear-gradient(45deg, #b2e68d, #bce689);
  right: 0;
}
.pbox {
  line-height: 2em;
}
.flag {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.red {
  background: red;
}
.yellow {
  background: rgb(255, 220, 0);
}
.green {
  background: green;
}
.blue {
  background: blue;
}
.purple {
  background: purple;
}
.grey {
  background: gray;
}
.goodInfo {
  text-align: left;
}
.esp {
  /* width: 180px; */
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor: pointer;
}
</style>
